<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        #applist{
            width: 350px;
            height: 300px;
            background-color: whitesmoke;
            margin: 100px auto;
            box-shadow: 0px 0px 5px;
        }
        .title{
            height: 50px;
            width: 100%;
            background-color: rgba(245, 234, 234, 0.558);
            text-align: center;
            line-height: 50px;
            font-weight: 700;
        }
        main{
            height: 250px;
            width: 100%;
            background-color: rgba(245, 234, 234, 0.558);
        }
        main .list{
            width: 100%;
            height: 60px;
            background-color:rgba(194, 202, 202, 0.349);
            display: flex;
            border-bottom: 2px solid whitesmoke;
            box-shadow: 0px 0px 4px;
           
        }
        main .list .left{
             width: 10%;
             height: 100%;
             box-sizing: border-box;
        }
        main .list .left img{
            width: 100%;
            padding-top: 10px;
        }
        main .list .mid{
            width: 70%;
            height: 100%;
            padding-left: 10px;
            box-sizing: border-box;
        }
        main .list .right{
            width: 20%;
            height: 100%;
            /* line-height: 60px; */
            text-align: center;
            padding-top: 20px;
            box-sizing: border-box;
        }
        .name{
            font-weight: 700;
            padding-top: 10px;
        }
        .news{
            font-size: 10px;
        }
        .but{
            width: 60px;
            height: 24px;
            border-radius: 10px;
            background-color: orange;
            font-size: 14px;
            line-height: 24px;
            color: orangered;
            font-weight: 700;
        }
    </style>
</head>
<body>
    <div id="applist">
        <div class="title">任务列表</div>
        <main>
            <div class="list" v-for="(item,index) in takelist" v-bind="index">
                <div class="left">
                    <img v-bind:src="item.pic" alt="">
                </div>
                <div class="mid">
                    <div class="name">{{item.name}}</div>
                    <div class="news">{{item.news}}</div>
                </div>
                <div class="right">
                    <div class="but">
                        {{item.status==1?'未完成':item.status==2?'领取':'已完成'}}
                    </div>
                    
                </div>
            </div>
        </main>
    </div>
</body>
</html>
<script src="./vue-2.5.21.js"></script>
<script>
    var v=new Vue({
        el:'#applist',
        data:{
            takelist:[
                {pic:'./img/7.png',name:'咪咕视频送流量',news:'咪咕视蛹,每月福500MB流量奖励',status:1},
                {pic:'./img/8.png',name:'和彩云送福利',news:'免费领1650空间+月月2GB',status:2},
                {pic:'./img/9.png',name:'最高40元套餐折扣券',news:'参与油奖,良脑10MMB,经险值+10',status:3},
                {pic:'./img/10.png',name:'吃喝玩乐享，超级秒杀',news:'进人总草二嗜学与秒系，交题:10B，经险值+10',status:1},         
            ]
        },
        computed:{},
        watch:{},
        filter:{},
        methods:{},
        directives:{},
        components:{}
    })
</script>